import React, { useState } from 'react'
import { Upload, Button } from 'antd'
import { UploadChangeParam, UploadFile } from 'antd/es/upload'

const Index: React.FC = () => {
  const [urls, setUrls] = useState<string[]>([])
  const handleChange = (info: UploadChangeParam<UploadFile<any>>) => {
    if(info.file.response) {
      const { code, data, message } = info.file.response
      const { url } = data;
      setUrls(urls => [...urls, url])
    }
  }
  return (
    <div>
      <Upload action="/api/upload" method="post" onChange={(info) => handleChange(info)} multiple>
        <Button>上传到云服务器</Button>
      </Upload>

      {
        urls.map((v, i) => {
          return <img src={v} key={i} alt="" height={200}/>
        })
      }
    </div>
  )
}

export default Index